<template>
    <div class="import">
        <!-- 合规条款导入 -->
        <el-dialog :title="importBtnName" :visible.sync="dialogVisible" width="45%" :close-on-click-modal="false">
            <div v-loading="isUpload" element-loading-text="文件导入中...">
                <div class="box-card">
                    <div style="display: flex">
                        <el-upload
                            :multiple="true"
                            :action="actionUrl"
                            :headers="headerObj"
                            :with-credentials="true"
                            list-type="text"
                            :show-file-list="false"
                            accept=".xlsx,.xls"
                            :data="paramData"
                            :disabled="disabledAll"
                            :before-upload="
                                (res, file, fileList) => {
                                    return uploadFileBefore(res, file, fileList);
                                }
                            "
                            :on-success="
                                (res, file, fileList) => {
                                    return uploadFileSuccess(res, file, fileList, '执行标准');
                                }
                            "
                            :on-error="
                                (res, file, fileList) => {
                                    return uploadFileError2(res, file, fileList);
                                }
                            "
                            :on-accept="
                                (res, file, fileList) => {
                                    return uploadFileError(res, file, fileList);
                                }
                            "
                        >
                            <el-button size="small" type="primary" style="border: none" :disabled="disabledAll || isUpload">添加文件</el-button>
                        </el-upload>
                        <el-button size="small" type="primary" style="margin-left: 20px" @click="downLoadFileModule">导入模板下载</el-button>
                    </div>
                    <!-- <div class="radioType">
                        <div>
                            <el-radio v-model="importType" label="0" style="font-weight: bold">替换方式导入</el-radio>
                            <div>注：替换界面中目前已存在的条款信息</div>
                        </div>
                        <div>
                            <el-radio v-model="importType" label="1" style="font-weight: bold">追加方式导入</el-radio>
                            <div>注：导入界面目前不存在的条款信息</div>
                        </div>
                    </div> -->
                </div>
                <div>
                    <div style="margin: 30px; font-size: 12px">导入总数量：{{ fileList1.total }}</div>
                    <div style="margin: 30px; font-size: 12px">导入成功数量：{{ fileList1.success }}</div>
                    <div style="margin: 30px; font-size: 12px">
                        导入失败数量：{{ fileList1.fail }}
                        <el-button
                            type="primary"
                            style="margin-left: 30%"
                            size="small"
                            @click="downLoadGroupFileBtn"
                            :disabled="fileList1.fileNo == 0"
                            >导入失败明细下载</el-button
                        >
                    </div>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">关 闭</el-button>
                <!-- <el-button type="primary" @click="confirmQuery('comfirm')">确 定</el-button> -->
            </span>
        </el-dialog>
    </div>
</template>
<script lang="ts">
import { Component, Vue, Watch, Prop } from 'vue-property-decorator';
import { dateFormat, getConfigItem } from '@/utils/tools';
import DictionConstUtil, { SGU_CACHE } from '@/utils/diction-const-util';
import { getUser } from '@/utils/user-util';
import { downLoadFile } from '@/utils/request';
@Component({
    name: 'ImportFileDialog',
    components: {},
})
export default class ImportFileDialog extends Vue {
    @Prop() importFileDialog;
    @Prop() treeNodeData;
    BASE_URL_API = getConfigItem('BASE_URL_API');
    private dialogVisible: boolean = false;
    private actionUrl = ''; // 附件上传url
    private importType = '1'; // 导入方式
    fileList1 = {
        fail: '',
        fileNo: '',
        success: '',
        total: '',
    };
    paramData = {}; // 上传额外参数
    headerObj = {
        Authentication: getUser().sessionId,
    };
    isUpload = false;
    created() {}
    @Watch('importFileDialog')
    async watchimportFileDialog(val) {
        this.dialogVisible = val;
        const baseUrl = this.BASE_URL_API;
        if (['1'].includes(this.treeNodeData.indexType)) {
            this.actionUrl = baseUrl + '/zhiguan/indexClause/import';
        } else if (['2'].includes(this.treeNodeData.indexType)) {
            this.actionUrl = baseUrl + '/zhiguan/indexClause/product/import';
        } else if (['3'].includes(this.treeNodeData.indexType)) {
            this.actionUrl = baseUrl + '/zhiguan/indexClause/company/import';
        }
        if (val == true) {
            this.getFileNo();
            // 第一层传 indexType
            if (this.treeNodeData.level === '1') {
                this.paramData = {
                    jsonData: JSON.stringify({ indexType: this.treeNodeData.indexType, type: this.importType }),
                };
            }
            // 第二层传 indexType + directoryCode (实际tree id)
            if (this.treeNodeData.level === '2' || (this.treeNodeData.level === '3' && this.treeNodeData.indexType === '2')) {
                this.paramData = {
                    jsonData: JSON.stringify({ directoryCode: this.treeNodeData.id, indexType: this.treeNodeData.indexType, type: this.importType }),
                };
            }
            // 第三层传 indexType + articleCode (实际tree id)
            if ((this.treeNodeData.level === '3' && this.treeNodeData.indexType !== '2') || this.treeNodeData.level === '4') {
                this.paramData = {
                    jsonData: JSON.stringify({ articleCode: this.treeNodeData.id, indexType: this.treeNodeData.indexType, type: this.importType }),
                };
            }
        } else {
            this.fileList1 = {
                fail: '',
                fileNo: '',
                success: '',
                total: '',
            };
        }
    }

    // @Watch('importType')
    // watchimportType(val) {
    //     this.paramData = { jsonData: JSON.stringify({ articleCode: this.treeNodeData.id, indexType: this.treeNodeData.indexType, type: val }) };
    // }

    @Watch('dialogVisible')
    watchDialogVisible(val) {
        if (val == false) {
            this.$emit('emitImportFile', val);
        }
    }

    get importBtnName() {
        const enums = { '1': '监管条款导入', '2': '合同条款导入', '3': '合规条款导入' };
        return enums[this.treeNodeData.indexType];
    }

    getFileNo() {
        this.$axios.get(`/zhiguan/indexClause/fail/fileNo/${this.treeNodeData.indexType}`).then((res: any) => {
            if (res.uploadFilePO) {
                if (res.uploadFilePO.fileNo != 0) {
                    this.fileList1 = {
                        fail: res.fail,
                        success: res.success,
                        total: res.total,
                        fileNo: res.uploadFilePO.fileNo,
                    };
                }
            }
        });
    }
    confirmQuery(param) {
        if (param == 'comfirm') {
            this.$emit('emitConfirmImportFile');
        }
    }
    // 导出
    downLoadGroupFileBtn() {
        downLoadFile({
            url: '/system/download/file/' + this.fileList1.fileNo,
            method: 'get',
        });
    }
    uploadFileBefore(res, file, fileList) {
        console.log('0000====')
        this.isUpload = true;
    }
    // 文件上传
    uploadFileSuccess(res, file, fileList, type) {
        if (res && res.returnCode === '000005') {
            this.yh_message_error(res.returnMsg || '导入失败!');
            this.isUpload = false; 
            return;
        }

        if (res && res.returnCode === '000000') {
            this.yh_message_success('导入完成!');
        }
        this.isUpload = false;
        this.fileList1 = {
            fail: res.data.fail,
            success: res.data.success,
            total: res.data.total,
            fileNo: res.data.uploadFilePO.fileNo,
        };

        if (this.fileList1.success && Number(this.fileList1.success) > 0) {
            this.$emit('emitImportFile', true, true);
        }
    }
    uploadFileError(res) {
        this.yh_message_warn('文件格式有误');
        this.isUpload = false;
    }
    uploadFileError2(res, file, fileList) {
        this.yh_message_error('导入失败!');
        this.isUpload = false;
    }
    downLoadFileModule() {
        downLoadFile({
            url: '/zhiguan/indexClause/downLoadFile',
            method: 'post',
            data: {
                indexType: this.treeNodeData.indexType,
            },
        });
    }
}
</script>
<style lang="scss" scoped>
.import {
    // height: calc(98vh - 7px);
    background: #ffffff;
}
.box-card {
    width: 100%;
    border: 1px solid #797979;
    padding: 10px 20px;
}
.radioType {
    margin-top: 30px;
    display: flex;
    justify-content: space-between;
}
</style>
